<template>
	<view class="container">
		<view class="background">
			<view class="top">
				<!-- 头像、昵称展示 -->
				<view class="userDisplay">
					<view class="avatar" @click="this.avatarChangeShow=true">
						<u--image :src="urlConstruct(userInfo.avatar)" width="120rpx" height="120rpx" shape="circle"
							:lazy-load="true">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u--image>
					</view>
					<view class="nameView">
						<view>
							<view style="font-weight: bold;font-size: 36rpx;color: #000000;">{{userInfo.nickName}}
							</view>
							<view style="font-size: 30rpx;display: flex;margin-top: 10rpx;color: #6f6d71;">
								<!-- <text class="iconfont" style="margin-right: 7rpx;color: #ffffff;">&#xe654;</text> -->
								<text class="selfIntroductionText">简介：{{userInfo.selfIntroduction}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="buttonView">
					<view class="buttonItem" @click="goToMyPublish">
						<text class="iconfont" style="margin-right: 15rpx;font-size: 50rpx;">&#xe613;</text>
						我发布的
					</view>
					<!-- 一条竖线 -->
					<view style="border-right: #2b92ff solid 1px;height: 40rpx;">
					</view>
					<view class="buttonItem">
						<text class="iconfont" style="margin-right: 15rpx;font-size: 50rpx;">&#xe638;</text>
						我的足迹
					</view>
				</view>
			</view>

		</view>

		<view class="userMessage">
			<!-- 		<view style="font-size: 18px;font-weight: bold;	padding: 20rpx;">
				<text>我的信息</text>
			</view> -->
			<u-cell-group>
				<u-cell name="userName" :value="userInfo.userName" :isLink="true">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 10rpx;">&#xe605;</text>
						<text class="u-cell-text">用户名</text>
					</view>
				</u-cell>
				<u-cell name="nickName" :value="userInfo.nickName" :isLink="true"
					@click="editMessage('nickName',userInfo.nickName,'昵称')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 10rpx;">&#xe605;</text>
						<text class="u-cell-text">昵称</text>
					</view>
				</u-cell>
				<u-cell name="avatar" :isLink="true" @click="editMessage('avatar',userInfo.avatar,'头像')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 10rpx;">&#xe60d;</text>
						<text class="u-cell-text">头像</text>
					</view>
				</u-cell>
				<u-cell name="schoolName" :value="userInfo.schoolName" :isLink="true"
					@click="editMessage('schoolId',userInfo.schoolName,'大学',userInfo.schoolId)">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 10rpx;">&#xe916;</text>
						<text class="u-cell-text">大学</text>
					</view>
				</u-cell>
				<u-cell name="campusName" :value="userInfo.campusName" :isLink="true"
					@click="editMessage('campusId',userInfo.campusName,'校区',userInfo.campusId,userInfo.schoolId)">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 10rpx;">&#xe628;</text>
						<text class="u-cell-text">校区</text>
					</view>
				</u-cell>
				<u-cell name="sex" :value="sexName" :isLink="true" @click="editMessage('sex',userInfo.sex,'性别')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 10rpx;">&#xe614;</text>
						<text class="u-cell-text">性别</text>
					</view>
				</u-cell>
				<u-cell name="email" :value="userInfo.email" :isLink="true"
					@click="editMessage('email',userInfo.email,'邮箱')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 10rpx;">&#xe672;</text>
						<text class="u-cell-text">邮箱</text>
					</view>
				</u-cell>
				<u-cell name="contactInformation" :isLink="true"
					@click="editMessage('contactInformation',userInfo.contactInformation,'联系方式')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 10rpx;">&#xe637;</text>
						<text class="u-cell-text">联系方式</text>
					</view>
				</u-cell>
				<u-cell name="selfIntroduction" :isLink="true"
					@click="editMessage('selfIntroduction',userInfo.selfIntroduction,'自我介绍')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 10rpx;">&#xe654;</text>
						<text class="u-cell-text">自我介绍</text>
					</view>
				</u-cell>
				<u-cell name="password" :isLink="true" @click="editMessage('password','-1','修改密码')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 10rpx;">&#xe603;</text>
						<text class="u-cell-text">修改密码</text>
					</view>
				</u-cell>
				<u-cell :isLink="true" @click="logout()">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 10rpx;">&#xe659;</text>
						<text class="u-cell-text">退出账号</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {
		logout
	} from "@/api/login";
	import {
		getUserProfileVo
	} from "@/api/user";
	import {
		picUrlConstruct
	} from "@/utils/picUrlConstruct.js";

	export default {

		data() {
			return {
				userInfo: {
					avatar: '',
					nickName: "你好呀",
					userName: "admin",
					schoolName: "XX大学",
					campusName: "XX学院",
					sex: 0,
					selfIntroduction: "自我介绍,打撒活动啊速宏达搜好滴傻大搜到阿斯顿撒旦好骚",
					contactInformation: "联系方式",
					email: "32136712361@qq.com"
				},
				sexName: '其他',
			}
		},
		created() {
			// this.getUserProfile();

		},
		onShow: function() {
			console.log("查询个人信息")
			this.getUserProfile();
		},

		methods: {
			urlConstruct(url) {
				return picUrlConstruct(url);
			},
			editMessage(editKey, currentValue, editName, valueId = undefined, schoolId = undefined) {
				uni.navigateTo({
					url: "/pages/my/profileEdit?editKey=" + editKey + "&currentValue=" + currentValue +
						"&editName=" + editName + "&valueId=" + valueId + "&schoolId=" + schoolId
				})
			},
			/**
			 * 登出账号
			 */
			logout() {
				// console.log("退出账号：")
				logout().then(res => {
					// console.log("退出账号：" + JSON.stringify(res));
					// 清除所有缓存
					uni.clearStorageSync();
					// 跳转到登录页
					uni.redirectTo({
						url: "/pages/login/login"
					})
				})
			},
			/**
			 * 获取用户信息
			 */
			getUserProfile() {
				getUserProfileVo().then(res => {
					// console.log("getUserProfile：" + JSON.stringify(res));
					this.userInfo = res.data;
					this.sexName = this.getSexName(this.userInfo.sex);
					console.log("头像：" + this.userInfo.avatar);
					// console.log("this.userInfo.sex:" + this.userInfo.sex + ",this.sexName:" + this.sexName);
					// console.log("this.userInfo：" + JSON.stringify(this.userInfo));
				})
			},
			getSexName(type) {
				if (type == 0) {
					return "男";
				} else if (type == 1) {
					return "女";
				} else if (type == 2) {
					return "其他";
				}
			},
			/**
			 * 查看我的发布
			 */
			goToMyPublish() {
				uni.navigateTo({
					url: "/pages/myPublish/myPublish"
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background: #F4F5F7;
		min-height: 100vh;
		font-family: sans-serif;

		.background {
			background-image: url("@/static/uniappMineBackground.png");
			background-repeat: no-repeat;
			background-size: 100%;
			width: 100%;
			// height: 150px;
			padding-top: 20px;
			margin-bottom: 25rpx;

			.top {
				background: rgba(255, 255, 255, 0.5);
				border-radius: 15px;
				box-shadow: 5rpx 10rpx 20rpx rgba(0, 0, 0, 0.2);
				margin: 0px 20rpx;
				height: 350rpx;

				.userDisplay {
					display: flex;
					padding: 25rpx;

					.avatar {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 20rpx;
						background: #ffffff;
						border-radius: 50%;
						padding: 3px;
					}

					.nameView {
						display: flex;
						justify-content: center;
						align-items: center;

						.selfIntroductionText {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							/* 显示1行 */
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}
				}

				.buttonView {
					display: flex;
					height: 180rpx;
					align-items: center;

					.buttonItem {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 32rpx;
					}
				}
			}

		}

		.userMessage {
			margin: 0rpx 20rpx;
			background: #F4F5F7;
			border-radius: 20rpx;
		}
	}
</style>